<template>
    <el-col class="border padd20">
        <CurrentDate :title="maxrole!=`admin`?`学习时长学校排名`:`学习时长学生排名`" />
        <el-col :span="24" class="padd10" v-if="Time.length !=0">
            <el-col class="box box-pack-between box-align-center mt10" v-for="(item,index) in Time" :key="index">
                <div class="box box-align-center">
                    <span class="w25">{{index+1}}</span>
                    <el-image :src="item.icon !=null?item.icon:'/static/image/logo.jpg'"
                        style="width: 28px;height: 28px;border-radius: 50%;min-width: 28px;" class="ml5 mr5"></el-image>
                    <span class="test-es ml10 tl w150" :title="item.name">{{item.name}}</span>
                </div>
                <div>
                    {{item.time}}小时
                </div>
            </el-col>
        </el-col>
        <el-col class="box box-align-center box-pack-center height100" v-else>
            暂无数据
        </el-col>
    </el-col>
</template>

<script>
    import CurrentDate from "./CurrentDate.vue";
    export default {
        components: {
            CurrentDate
        },
        props: {
            Time: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                maxrole: this.$store.state.maxRole
            }
        },
        methods: {}
    }
</script>
<style scoped>
    @import './com.scss';
</style>
<style scoped>
    .border {
        height: 450px;
    }
</style>
